import { Button, Table } from 'antd';
import { useState } from 'react';
import CreateModal from './components/CreateModal';
import DetailModal from './components/DetailModal';
import styles from './index.less';

interface OrderTableProps {
  data: any[];
  onCreate: (content: string) => void;
  onFinish: (id: string) => void;
}

const OrderTable: React.FC<OrderTableProps> = ({
  data,
  onCreate,
  onFinish,
}) => {
  const [showContent, setShowContent] = useState<string>('');
  const [viewModalShow, setViewModalShow] = useState<boolean>(false);

  const showDetail = (content: string) => {
    setShowContent(content);
    setViewModalShow(true);
  };

  const columns = [
    {
      title: '事项内容',
      dataIndex: 'content',
      width: 150,
      ellipsis: true,
    },
    {
      title: '事项状态',
      dataIndex: 'status',
      width: 100,
      render: (status: string) => {
        let text = status === '1' ? '待办' : '已办';
        return <span>{text}</span>;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 150,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 150,
      render: (text: string, record: any) => {
        return (
          <>
            <Button
              onClick={() => {
                showDetail(record.content);
              }}
              className={styles.detail}
            >
              详情
            </Button>
            {record.status === '1' && (
              <Button onClick={() => onFinish(record.id)} type="primary">
                完成
              </Button>
            )}
          </>
        );
      },
    },
  ];

  const [createModalShow, setCreateModalShow] = useState<boolean>(false);

  const handleSubmit = (content: string) => {
    onCreate(content);
    setCreateModalShow(false);
  };

  const handleCancel = () => {
    setCreateModalShow(false);
  };

  return (
    <div className={styles.table}>
      <div className={styles.header}>
        <div>事项表格</div>
        <div>
          <Button onClick={() => setCreateModalShow(true)} type="primary">
            新建
          </Button>
        </div>
      </div>
      <Table columns={columns} dataSource={data} />
      <CreateModal
        createModalShow={createModalShow}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      ></CreateModal>
      <DetailModal
        detailModalShow={viewModalShow}
        onCancel={() => {
          setViewModalShow(false);
        }}
        showContent={showContent}
      ></DetailModal>
    </div>
  );
};

export default OrderTable;
